<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .box {
        width: 800px;
        height: 500px;
        margin: 100px auto;
        overflow: hidden;
        position: relative;
    }

    .box ul {
        width: 1000%;
        height: 500px;
        left: 0;
        top: 0;
        position: absolute;
    }

    .box ul li {
        float: left;
    }

    .box ol {
        position: absolute;
        left: 50%;
        /* width: 250px;
    margin-left: -125px; */
        transform: translate(-50%);
        bottom: 20px;
    }

    .box ol li {
        float: left;
        width: 30px;
        height: 30px;
        background-color: rgba(100, 30, 80, .3);
        margin: 0 5px;
        text-align: center;
        cursor: pointer;
        line-height: 30px;
    }

    .current {
        color: seagreen;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li><img src="../img/girl/girl (6).jpg" alt=""></li>
            <li><img src="../img/girl/girl (7).jpg" alt=""></li>
            <li><img src="../img/girl/girl (8).jpg" alt=""></li>
            <li><img src="../img/girl/girl (9).jpg" alt=""></li>
            <li><img src="../img/girl/girl (10).jpg" alt=""></li>
            <li><img src="../img/girl/girl (11).jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>
</body>
<script>
    var oli = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
    var oul = document.getElementsByTagName('ul')[0];
    for (let i = 0; i < oli.length; i++) {
        oli[i].index = i;
        oli[i].onmouseover = function () {

            for (let j = 0; j < oli.length; j++) {
                oli[j].className = '';
            }
            this.className = 'current';
            oul.style.left = this.index * -800 + 'px';
        }
    }
</script>

</html>